<template>
     <Modal
    v-model="ThirdPayModal"
    title="在线支付"
    @on-ok="ok"
    @on-cancel="cancel"
    width="900"
  >
  <div class="wrapper">
      <div class="wrapper-head">
        <div class="head-left">
          <div class="left-tips">订单提交成功，请尽快付款！</div>
          <div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
        </div>
        <div class="head-right">
          <div>应付金额 <span class="price">{{payParams.price | unitPrice}}</span>元</div>
        </div>
      </div>
      <div class="content">
        <div class="pay-way">{{payParams.paymentMethod === 'ALIPAY' ? '支付宝支付' : '微信支付'}}</div>
        <div class="qrcode">
          <div style="width:200px;height:200px;border:1px solid #eee;">
            <vue-qr :text="qrcode" :margin="0" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
          </div>
          <div class="intro">
            <Icon type="md-qr-scanner" /> 请使用{{payParams.paymentMethod === 'ALIPAY' ? '支付宝' : '微信'}}扫码付款
          </div>
        </div>
        <div class="btn-div">
          <p class="mb_10">支付成功后自动跳转，如未跳转请点击按钮手动跳转。。。</p>
          <div>
            <Button @click="handlePay">重新支付</Button>
            <Button type="success" @click="(ThirdPayModal=false)">支付成功</Button>
          </div>
        </div>
        <a @click="anotherWay">选择其他支付方式></a>
      </div>
    </div>
</Modal>
 
  </template>
  <script>
  import vueQr from 'vue-qr';
  import { payCallback, pay } from '@/api/pay.js';
  import bus from '@/libs/bus.js'
  export default {
    components: { vueQr },
    data () {
      return {
        payParams:{
          price:null,
          paymentMethod:null,
        },//支付参数
        ThirdPayModal:false,
        qrcode: '', // 二维码
        params: this.$route.query, // 参数
        interval: null, // 定时器
        num: 0 // 商品数
      };
    },
    methods: {
        //选择另外的方式
        anotherWay(){
            this.ThirdPayModal=false
        },
        cancel(){},
        ok(){},
      // 获取支付二维码
      handlePay () {
        const params = this.payParams;
        pay(params).then(res => {
          if (res.success) {
            this.qrcode = res.result;
            this.num = 0;
            this.interval = setInterval(this.callback, 5000);
          } else {
            this.$Message.error(res.message)
          }
        });
      },
      callback () { // 支付回调接口
        this.num++;
        if (this.num >= 7) {
          clearInterval(this.interval);
          this.interval = null;
        }
        let params = this.payParams;
        delete params.paymentMethod;
        delete params.paymentClient;
        payCallback(params).then((res) => {
        if (this.ThirdPayModal) {
          if (res.result) {
            //支付成功
            this.ThirdPayModal = false;
            bus.$emit("payStatus", this.payParams);
            clearInterval(this.interval);
            this.interval = null;
            // bus.$emit('payDone','success')
            // this.$router.push({path: '/payDone', query: {orderType: this.$route.query.orderType}});
        } else if (!this.ThirdPayModal) {
          //关闭弹框，停止发送回调请求
          clearInterval(this.interval);
          this.interval = null;
        }
        }
      });
      }
    },
    mounted () {
        bus.$on('payQrShow',val=>{
            if(val){
                this.ThirdPayModal=true
                this.payParams=val
            this.handlePay();
            }
        })
     
    }
  };
  </script>
  <style scoped lang="scss">
  .head-left {
    font-weight: bold;
  }
  .left-tips {
    font-size: 21px;
  }
  
  .left-tips-time {
    font-size: 16px;
  }
  .wrapper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.75;
  }
  .wrapper-head,
  .content {
    padding: 20px 40px;
    width: 800px;
    margin: 20px auto;
  }
  .wrapper {
    width: 100%;
    height: 100%;
  }
  .content {
    background-color: #fff;
    box-shadow: 0 6px 10px #ddd;
    position: relative;
    display: flex;
    .pay-way {
      font-weight: bold;
      font-size: 18px;
    }
  
    .qrcode {
      margin: 30px 0 0 70px;
    }
  
    .intro {
      background-color: #ff7674;
      height: 40px;
      line-height: 40px;
      margin-top: 10px;
      color: #fff;
      font-size: 16px;
      text-align: center;
    }
  
    .btn-div {
      margin:120px 0 0 30px;
    }
  
    a {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }
  .price {
    font-size: 18px;
    font-weight: bold;
    color: $theme_color;
  }
  .head-right {
    font-weight: bold;
  }
  </style>
  